import React from 'react';
import cy from '../../img/cy.png';

interface ChunyuIconProps {
  isActive?: boolean;
  className?: string;
}

export const ChunyuIcon: React.FC<ChunyuIconProps> = ({ isActive = false, className }) => {
  return (
    <div className={className} style={{ 
      width: '24px', 
      height: '24px',
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <img 
        src={cy} 
        alt="春雨" 
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'contain',
          filter: isActive 
            ? 'brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)'
            : 'none',
          transition: 'filter 0.3s ease'
        }}
      />
    </div>
  );
};
